<template>
  <div class="login-container flex">
    <div class="login-left">
      <!-- 使用粒子动画 -->
      <vue-particles id="tsparticles" :options="particlesOptions" />
      <!-- 背景图片 -->
      <img :src="loginBg" class="login-left-waves" />
    </div>
    <div class="login-right flex">
      <div class="login-right-warp flex-margin">
        <span class="login-right-warp-one"></span>
        <span class="login-right-warp-two"></span>
        <div class="login-right-warp-mian">
          <div class="login-right-warp-main-title">
            {{ getThemeConfig.globalTitle }} 欢迎您！
          </div>
          <div class="login-right-warp-main-form">
            <el-tabs v-model="state.tabsActiveName">
              <el-tab-pane :label="$t('message.label.one1')" name="account">
                <Account />
              </el-tab-pane>
              <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                <Mobile />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="loginIndex">
  import { defineAsyncComponent, onMounted, ref, reactive, computed } from 'vue'
  import { storeToRefs } from 'pinia'
  import { useThemeConfigOut } from '@/stores/modules/themeConfig'
  import { NextLoading } from '@/utils/Loading'
  import loginBg from '@/assets/login-bg.svg'

  // 引入组件
  const Account = defineAsyncComponent(
    () => import('@/views/login/component/account.vue')
  )
  const Mobile = defineAsyncComponent(
    () => import('@/views/login/component/mobile.vue')
  )

  // 定义变量内容
  const storesThemeConfig = useThemeConfigOut()
  const { themeConfig } = storeToRefs(storesThemeConfig)
  const state = reactive({
    tabsActiveName: 'account',
    isScan: false
  })
  //value: '#D3EFFF'
  const particlesOptions = ref({
    // background: {
    //   color: {
    //     value: '#D3EFFF'
    //   }
    // },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: 'push'
        },
        onHover: {
          enable: true,
          mode: 'grab' // repulse 线条弹开  grab 线条跟随
        }
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40
        },
        push: {
          quantity: 4
        },
        repulse: {
          distance: 200,
          duration: 0.4
        },
        attract: {
          distance: 200,
          duration: 0.4,
          factor: 5
        }
      }
    },
    particles: {
      color: {
        value: '#0d47a1',
        animation: {
          enable: true,
          speed: 20,
          sync: true
        }
      },
      links: {
        color: 'random',
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1
      },
      move: {
        direction: 'none',
        enable: true,
        outModes: 'bounce',
        random: false,
        speed: 5,
        straight: false
      },
      number: {
        density: {
          enable: true
        },
        value: 80
      },
      opacity: {
        value: 0.5
      },
      shape: {
        type: 'circle'
      },
      size: {
        value: { min: 1, max: 5 }
      }
    },
    detectRetina: true
  })

  // 获取布局配置信息
  const getThemeConfig = computed(() => {
    return themeConfig.value
  })
  // 页面加载时
  onMounted(() => {
    NextLoading.done()
  })
</script>

<style scoped lang="scss">
  .login-container {
    height: 100%;
    background: var(--el-color-white);
    .login-left {
      flex: 1;
      position: relative;
      background-color: rgba(211, 239, 255, 1);
      margin-right: 100px;
      .login-left-logo {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50px;
        left: 80px;
        z-index: 1;
        animation: logoAnimation 0.3s ease;
        img {
          width: 52px;
          height: 52px;
        }
        .login-left-logo-text {
          display: flex;
          flex-direction: column;
          span {
            margin-left: 10px;
            font-size: 28px;
            color: #26a59a;
          }
          .login-left-logo-text-msg {
            font-size: 12px;
            color: #32a99e;
          }
        }
      }
      .login-left-img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 52%;
        img {
          width: 100%;
          height: 100%;
          animation: error-num 0.6s ease;
        }
      }
      .login-left-waves {
        position: absolute;
        top: 0;
        right: -100px;
      }
    }
    .login-right {
      width: 700px;
      .login-right-warp {
        border: 1px solid var(--el-color-primary-light-3);
        border-radius: 3px;
        width: 500px;
        height: 500px;
        position: relative;
        overflow: hidden;
        background-color: var(--el-color-white);
        .login-right-warp-one,
        .login-right-warp-two {
          position: absolute;
          display: block;
          width: inherit;
          height: inherit;
          &::before,
          &::after {
            content: '';
            position: absolute;
            z-index: 1;
          }
        }
        .login-right-warp-one {
          &::before {
            filter: hue-rotate(0deg);
            top: 0px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(
              90deg,
              transparent,
              var(--el-color-primary)
            );
            animation: loginLeft 3s linear infinite;
          }
          &::after {
            filter: hue-rotate(60deg);
            top: -100%;
            right: 2px;
            width: 3px;
            height: 100%;
            background: linear-gradient(
              180deg,
              transparent,
              var(--el-color-primary)
            );
            animation: loginTop 3s linear infinite;
            animation-delay: 0.7s;
          }
        }
        .login-right-warp-two {
          &::before {
            filter: hue-rotate(120deg);
            bottom: 2px;
            right: -100%;
            width: 100%;
            height: 3px;
            background: linear-gradient(
              270deg,
              transparent,
              var(--el-color-primary)
            );
            animation: loginRight 3s linear infinite;
            animation-delay: 1.4s;
          }
          &::after {
            filter: hue-rotate(300deg);
            bottom: -100%;
            left: 0px;
            width: 3px;
            height: 100%;
            background: linear-gradient(
              360deg,
              transparent,
              var(--el-color-primary)
            );
            animation: loginBottom 3s linear infinite;
            animation-delay: 2.1s;
          }
        }
        .login-right-warp-mian {
          display: flex;
          flex-direction: column;
          height: 100%;
          .login-right-warp-main-title {
            height: 130px;
            line-height: 130px;
            font-size: 27px;
            text-align: center;
            letter-spacing: 3px;
            animation: logoAnimation 0.3s ease;
            animation-delay: 0.3s;
            color: var(--el-text-color-primary);
          }
          .login-right-warp-main-form {
            flex: 1;
            padding: 0 50px 50px;
            .login-content-main-sacn {
              position: absolute;
              top: 0;
              right: 0;
              width: 50px;
              height: 50px;
              overflow: hidden;
              cursor: pointer;
              transition: all ease 0.3s;
              color: var(--el-color-primary);
              &-delta {
                position: absolute;
                width: 35px;
                height: 70px;
                z-index: 2;
                top: 2px;
                right: 21px;
                background: var(--el-color-white);
                transform: rotate(-45deg);
              }
              &:hover {
                opacity: 1;
                transition: all ease 0.3s;
                color: var(--el-color-primary) !important;
              }
              i {
                width: 47px;
                height: 50px;
                display: inline-block;
                font-size: 48px;
                position: absolute;
                right: 1px;
                top: 0px;
              }
            }
          }
        }
      }
    }
  }
</style>
